<template>
  <div class="index">
    <div class="clearfix header">
      <div class="fl">
                <i class="iconfont iconrenminbi f20  c1 v-middle"></i>
        账户余额：
        <span class="c4">4900.00</span>
        元
      </div>
      <div class="fr mt10">
        <Button type="primary" size="small">充值</Button>
        <!-- <Button type="primary" size="small" ghost>提现</Button> -->
      </div>
    </div>
    
    <div class="mt20">
        <div class="search-condition">
          起止时间：
          <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
          至
          <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
          
          &nbsp;&nbsp;&nbsp;
          交易类型：
          <Select v-model="tradeType" style="width:100px">
              <Option v-for="item in tradeTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          &nbsp;&nbsp;&nbsp;
           支付宝交易流水号：
           <Input  placeholder="请输入产品名称" style="width: 150px" >
             <!-- <span slot="append">查询</span> -->
           </Input>
           <Button type="primary">查询</Button>
        </div>
        
        <div class="mt20">
          <Tabs value="name1">
            <TabPane label="账户收支明细" name="name1">
              
              <Table stripe border :columns="columns1" :data="data1">
                <template slot-scope="{ row, index }" slot="income">
                  <Icon type="md-add-circle c7" size="20" /> 15000.00
                </template>
                <template slot-scope="{ row, index }" slot="outcome">
                  <Icon type="md-remove-circle c5" size="20" /> 8000.00
                </template>
                <template slot-scope="{ row, index }" slot="action">
                  <Icon type="ios-paper c1" title="查看" size="20" @click="gotoDetail(row)"/>
                </template>
              </Table>
            </TabPane>
            <TabPane label="其他收支明细" name="name2">

              <Table stripe border :columns="columns1" :data="data1">
                <template slot-scope="{ row, index }" slot="income">
                  <Icon type="md-add-circle c7" size="20" /> 15000.00
                </template>
                <template slot-scope="{ row, index }" slot="outcome">
                  <Icon type="md-remove-circle c5" size="20" /> 8000.00
                </template>
                <template slot-scope="{ row, index }" slot="action">
                  <Icon type="ios-paper c1" title="查看" size="20" @click="gotoDetail(row)"/>
                </template>
              </Table>

            </TabPane>
             <Button @click="handleTabsAdd" type="warning" size="small" slot="extra">数据导出</Button>
        </Tabs>
        </div>
    </div>
  
    <div class="page mt20">
      <Page :total="100" show-sizer show-total/>
    </div> 
  
  </div>
</template>

<script>
  export default {
    data () {
      return{
        position:[
          {title: '财务管理', link:'/admin/moneyManage'},
          {title: '收支明细'}
        ],
        tradeType: '1',
        tradeTypes:[
          {label: '支付宝',value: '1'},
          {label: '微信',value: '2'},
        ],
        columns1: [
          {title: '流水号', key: 'id'},
          {title: '交易流水号', key: 'address'},
          { title: '日期', key: 'address'},
          { title: '收入', slot: 'income'},
          { title: '支出', slot: 'outcome'},
          { title: '余额（元）', key: 'address'},
          { title: '备注', key: 'address'},
          { title: '账号', key: 'address'},
          { title: '操作', slot: 'action', width: 60, align: 'center'},
         ],
         data1:[
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           
         ]
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    methods:{
      gotoDetail (item) {
        this.$router.push('incomeDetail?id' + item.id)
      }
    }
  }
</script>

<style lang="less" scoped>
  
  .header{
    background: #f2f2f2;
    padding: 14px;
    .fl{
      line-height: 2;
      font-size: 18px;
    }
  }
  </style>
